<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值界面</title>

    <style>
        html {
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
        }

        * {
            padding: 0;
            margin: 0;
            font-family: 'Open Sans Light';
            letter-spacing: .05em;
        }
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .d1{


            height: 100%;
            background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);
        }
        .d2{

            background-color: #e39fe2;
            width: 250px;
            height: 500px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            border-radius: 15px;
            top:50%;
            transform: translate(-50%,-50%);


        }

        .d2 input {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: none;
            padding: 10px;
            border-bottom: 2px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .header {
            font-size:  30px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

    </style>
</head>
<body>
<div class="d1">

    <div class="d2">
        <div class="header">充值</div>

        <input type="text" id="idCard"  placeholder="身份证号:"  onblur="validateIdCard()" /><span id="idCardTip"  style="color: red"></span><br>
        <input type="text" id="balance"  placeholder="充值金额:"  onblur="validateBalance()" /><span id="balanceTip" style="color: red"> </span><br>
        <input type="button" value="充值" id="reCharge">
        <span id="backMsg"> </span>
    </div>
</div>
</body>
</html>
<script src="/js/jquery-3.5.1.js"></script>
<script>


    $(function () {
        $("#reCharge").click(function () {
            validateIdCardAjax();
            setTimeout(function () {
                if (validateBalance() && bool) {
                    $.post("/borRecharge.admin",{idCard: $("#idCard").val(), balance: $("#balance").val()}, function (responseText) {
                        if (responseText == "success") {
                            $("#backMsg").css("color","green").append("充值成功");
                            $("#idCardTip").prop("value","");
                            $("#balanceTip").prop("value","");

                        }
                    })
                }
            },500);



        })

    })

    /**
     * 验证身份证不能为空
     * @returns {boolean}
     */
    function validateIdCard() {
        $("#idCardTip").empty();
        if ( !$("#idCard").val()) {
            $("#idCardTip").html("身份证不能为空")
            return false;
        } else {
            let bool = validateIdCardAjax();
            return bool;
        }
    }

    /**
     * 后台验证身份证是否存在
     */
    var bool ;
    function validateIdCardAjax() {
        bool = false;
        $.post("/validateBorIdCard.admin",{idCard: $("#idCard").val()}, function (responseText) {
            let back = JSON.parse(responseText);
            if (back.getBorMsg == "false") {
                $("#idCardTip").html("该用户不存在")
                bool = false;
            } else if (back.getBorMsg == "true") {
                bool = true;
            } else
                bool = false;
        });
    }

    function validateBalance() {
        $("#balanceTip").empty();
        let balance = $("#balance").val();
        let reg = /^[1-9]\d*(.\d+)?$/;
        if (balance.match(reg)) {
            if (balance.indexOf(".") > 0) {
                if (balance.substring(balance.indexOf(".") + 1).length <= 2 && balance.substring(0, balance.indexOf(".")).length <= 4) {
                    balanceTip = 1;
                } else {
                    $("#balanceTip").html("金额必须符合 0000.00 格式")
                    return false;
                }
            } else {
                if (balance.length < 5) {
                    return true;
                } else {
                    $("#balanceTip").html("金额最大不能超过 9999.99")
                    return false;
                }
            }
        } else {
            $("#balanceTip").html("请输入正确的金额")
            return false;
        }

    }
</script>